<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" type="text/css" href ="/phonebook/css/amazeui.css">
	<link rel="stylesheet" type="text/css" href ="/phonebook/css/amazeui.flat.css">
	<link rel="stylesheet" type="text/css" href ="/phonebook/css/amazeui.flat.min.css">
	<link rel="stylesheet" type="text/css" href ="/phonebook/css/amazeui.min.css">
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>

</head>

<body style="background:url(/phonebook/images/bg.jpg)" >
<div class="w3_agile_main_grids">

			<div class="slider">
				<div class="flexslider">
<div class="am-u-sm-11"  style="margin-left:4%;margin-top:80px;">
	<input type="text" id="number" placeholder="请输入号码" />
	<input type="button" value="查询" id="select_btn" />
	<br />
	
	<table id="person" class="am-table am-table-striped table-main am-table-hover" >
		<thead>
			<tr>
				<th>电话号码</th>
				<th>姓名</th>
				<th>性别</th>
				<th>地址</th>
				<th>e-mail</th>
			</tr>
		</thead>
		<tbody>
        </tbody>
	</table>
	</div>
	</div>
	
	</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$.ajax({
type:"GET",
url:"person",
contentType:"application/json",
dataType:"json",
success:function(data){showPerson(data);},
error:function(){alert("error");}
});

//$("#person").draggable();

$("#select_btn").click(function(){ 
var number = $("#number").val();
$.ajax({
type:"GET",
url:"getPersonByNumber",
data:{"number":number},
contentType:"application/json",
dataType:"json",
success:function(data){showPerson(data);},
error:function(){alert("error");}

});

});

function showPerson(data){
$("#person tbody").empty("");
$.each(data.person,function(num,person){
if(person.name==null)person.name="不详";
if(person.sex==null)person.sex="不详";
if(person.address==null)person.address="不详";
if(person.email==null)person.email="不详";
$("#person tbody").append("<tr><td>"+person.number+"</td><td>"+person.name+
"</td><td>"+person.sex+"</td><td>"+person.address
+"</td><td>"+person.email+"</td><td><button type='button' onclick='updatePerson("+person.id+")'"+">修改</button></td><td><button type='button' onclick='del("+person.id+")' value="+person.id+">删除</button></td></tr>");});
}
/* "number="+
person.name+"&name="+person.name+"&sex="+person.sex+"&address="+person.address+"&email="+person.email+"'' value="+person.id+
 */

});
function updatePerson(id){
window.location.href="jsp/updatePerson.jsp?id="+id;
}


function del(id){
var personId =id; 
if(confirm("确定要删除该条记录么")==true){
$.ajax({
type:"DELETE",
url:"deletePerson/"+personId,
//data:{"id":personId},
contentType:"application/json",
dataType:"json",
success:function(data){if(data.code==200)alert("删除成功");
if(data.code==500)alert("删除失败");
window.location.reload();},
error:function(){alert("error");}
});
};

}




</script>